<template>
  <div>
    <!-- 上面部分 -->
    <el-row>
      <el-col :span="6">
        <el-card>
          <!-- 第一个 card -->
          <Detail title="总销售额">
            <template slot="count">￥ 12346</template>
            <template slot="charts">
              <span class="text">周同比 20% <svg t="1657556728952" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="3314" width="16" height="16">
                  <path d="M703.280488 365.511671c-4.329609 10.697643-13.921058 17.040095-25.236777 17.040095L544.234145 382.551766 544.234145 835.109955c0 17.838274-14.398942 32.296567-32.232099 32.296567-17.838274 0-32.236192-14.458293-32.236192-32.296567L479.765855 382.551766l-134.206608 0c-11.314697 0-20.906146-6.342452-25.234731-17.040095-4.330632-10.69969-2.081405-22.148439 5.92085-30.334889l166.241208-170.104189c5.333472-5.459339 11.773138-8.1711 19.315928-8.1711 7.543813 0 13.982456 2.742461 19.316951 8.201799l166.241208 170.068374C705.358823 343.358115 707.610096 354.813005 703.280488 365.511671z"
                    p-id="3315" fill="#1afa29"></path>
                </svg></span>
              &nbsp;&nbsp;&nbsp;
              <span class="text">日同比 10% <svg t="1657556792713" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="4459" width="16" height="16">
                  <path d="M800.9 646.9c-9.4-9.4-24.6-9.3-33.9 0.1L536.1 878.7V88c0-13.3-10.7-24-24-24s-24 10.7-24 24v790.3L257.6 647.2c-9.4-9.4-24.6-9.4-33.9 0-9.4 9.4-9.4 24.6 0 33.9l271.5 272.3c4.7 4.7 10.8 7.1 17 7.1 5.2 0 10.3-1.7 14.6-5 1.4-0.9 2.7-1.9 3.9-3.1L801 680.8c9.4-9.4 9.3-24.6-0.1-33.9z"
                    p-id="4460" fill="#d81e06"></path>
                </svg></span>
            </template>
            <template slot="footers">
              日销售额 ￥ 1234
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <!-- 第二个 card -->
          <Detail title="访问量">
            <template slot="count">8888</template>
            <template slot="charts">
              <LineCharts />
            </template>
            <template slot="footers">
              日访问量 1234
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <!-- 第三个 card -->
          <Detail title="支付笔数">
            <template slot="count">8888</template>
            <template slot="charts">
              <BarCharts />
            </template>
            <template slot="footers">
              转化率 30%
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <!-- 第四个 card -->
          <Detail title="运营活动效果">
            <template slot="count">10%</template>
            <template slot="charts">
              <ProgressCharts />
            </template>
            <template slot="footers">
              <span class="text">周同比 20% <svg t="1657556728952" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="3314" width="16" height="16">
                  <path d="M703.280488 365.511671c-4.329609 10.697643-13.921058 17.040095-25.236777 17.040095L544.234145 382.551766 544.234145 835.109955c0 17.838274-14.398942 32.296567-32.232099 32.296567-17.838274 0-32.236192-14.458293-32.236192-32.296567L479.765855 382.551766l-134.206608 0c-11.314697 0-20.906146-6.342452-25.234731-17.040095-4.330632-10.69969-2.081405-22.148439 5.92085-30.334889l166.241208-170.104189c5.333472-5.459339 11.773138-8.1711 19.315928-8.1711 7.543813 0 13.982456 2.742461 19.316951 8.201799l166.241208 170.068374C705.358823 343.358115 707.610096 354.813005 703.280488 365.511671z"
                    p-id="3315" fill="#1afa29"></path>
                </svg></span>
              &nbsp;&nbsp;&nbsp;
              <span class="text">日同比 10% <svg t="1657556792713" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="4459" width="16" height="16">
                  <path d="M800.9 646.9c-9.4-9.4-24.6-9.3-33.9 0.1L536.1 878.7V88c0-13.3-10.7-24-24-24s-24 10.7-24 24v790.3L257.6 647.2c-9.4-9.4-24.6-9.4-33.9 0-9.4 9.4-9.4 24.6 0 33.9l271.5 272.3c4.7 4.7 10.8 7.1 17 7.1 5.2 0 10.3-1.7 14.6-5 1.4-0.9 2.7-1.9 3.9-3.1L801 680.8c9.4-9.4 9.3-24.6-0.1-33.9z"
                    p-id="4460" fill="#d81e06"></path>
                </svg></span>
            </template>
          </Detail>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import Detail from './detail'
  import LineCharts from './linecharts'
  import BarCharts from './barcharts'
  import ProgressCharts from './progresscharts'
  export default {
    components: {
      Detail,
      LineCharts,
      BarCharts,
      ProgressCharts,
    }
  }
</script>

<style scoped lang="scss">
  svg {
    height: 11px;
    width: 11px;
  }

  .text {
    font-size: 12px;
  }

  .el-row {
    display: flex;
  }

  .el-col {
    margin: 0 10px;
  }
</style>
